html, body {
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    width: 600px;
    height: 600px;
    border: solid 1px red;
    position: relative;
    border-radius: 50%;
    background-image: url('../images/clock_bg.jpeg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/*设置中心点的位置*/
.point {
    width: 40px;
    height: 40px;
    background-color: orange;
    border-radius: 50%;
    position: absolute;
    left: 280px;
    top: 280px;
}

.container div{
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: do-round;
}

.seconds{
  width:500px;
  height: 6px;
  position: absolute;
  left:52px;
  top:297px;
  animation-duration: 60s;
  /*animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: do-round;*/
}
span{
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
.seconds span{
  width:260px;
  height:6px;
  background-color: green;
  /*display: inline-block;
  position: absolute;
  top: 0;
  left: 0;*/
}

.minutes{
  width:400px;
  height: 8px;
  position: absolute;
  left:100px;
  top:296px;
  animation-duration: 3600s;
}
.minutes span{
  background-color: red;
  /*display: inline-block;
  position: absolute;
  top: 0;
  left: 0;*/
  width: 220px;
  height: 8px;
}

.hours{
  width:300px;
  height: 10px;
  position: absolute;
  left:150px;
  top:295px;
  animation-duration: 43200s;
  /*animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: do-round;*/
}
.hours span{
  background-color: black;
  width: 170px;
  height: 10px;
}

@keyframes do-round {
    0%{
      transform: rotate(0deg);
    }
    100%{
      transform: rotate(360deg);
    }
}
